<template>
    <view>
        <u-navbar title="购物车" :placeholder="true" :autoBack="true">
        </u-navbar>
        <view class="page">
            <view class="title">My cart</view>
            <view class="list" v-if="cart.length > 0">

                <label class="item" v-for="item, index in cart" :key="item.id" @click.passive="goBookDetail(item)">
                    <u-checkbox-group @change="changeSelectedItem(index)">
                        <u-checkbox class="checkbox" :checked="item.isChecked == 1"></u-checkbox>
                    </u-checkbox-group>
                    <image class="leftImg" :src="item.coverImage"></image>
                    <view class="middle">
                        <view class="name">《{{ item.bookTitle }}》</view>
                        <view class="author">{{ item.author }}</view>
                        <view class="price">￥{{ item.price }}</view>
                    </view>
                    <view class="right">
                        <i @click.stop="reMove(index)">×</i>
                    </view>
                </label>

                <view class="divider">
                    <u-divider text="分割线" :dot="true"></u-divider>
                </view>
            </view>
            <u-empty v-else mode="car" marginTop="50%" icon="http://cdn.uviewui.com/uview/empty/car.png">
            </u-empty>

            <view class="settlement">
                <view class="left">
                    <u-checkbox-group @change="changeSelectedAll">
                        <u-checkbox class="checkbox" :checked="isCheckedAll" :label="'已选' + isCheckedNum"></u-checkbox>
                    </u-checkbox-group>
                </view>
                <view class="right">
                    <view class="cost">
                        <view class="price">￥{{ totalPrice }}</view>
                        <view class="freight">运费<span>￥{{ postage }}</span></view>
                    </view>
                    <button class="btn" @click="goPayment">结算</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            curIndex: "1",
            cart: [],
        }
    },
    computed: {
        // 获取默认地址
        getDefultAddress() {
            return this.$store.state.address.addressList[0]
        },
        isCheckBook() {
            return this.cart.filter(item => item.isChecked == 1)
        },
        totalPrice() {
            return (parseFloat(this.isCheckedPrice) + parseFloat(this.postage)).toFixed(2)
        },
        isCheckedNum() {
            return this.cart.filter(item => item.isChecked == 1).length;
        },
        isCheckedPrice() {
            return this.cart.filter(item => item.isChecked == 1).reduce((total, item) => total + parseFloat(item.price), 0).toFixed(2);
        },
        // 计算运费
        postage() {
            return this.cart.filter(item => item.isChecked == 1).reduce((total, item) => item.postage == '包邮' ? total + 0 : total + parseFloat(item.postage), 0).toFixed(2);
        },
        // 是否全部选中
        isCheckedAll() {
            return this.cart.every(item => item.isChecked == 1);
        }
    },
    mounted() {
        this.getCart()
        this.$store.dispatch('getAddress')
    },
    methods: {
        goBookDetail(book) {
            this.$store.dispatch('getBookDetail', book.bookId).then(res => {
                if (res == 'success') {
                    this.$Router.push({
                        name: 'detail'
                    })
                }
            })
        },
        goPayment() {

            uni.showLoading({
                title: '正在为您加载订单',
                mask: true
            })
            if (this.isCheckedNum == 0) {
                this.$tools.toast('不能选择空订单进行结算哦')
                return;
            }
            let data = {
                price: this.totalPrice,
                bookId: this.isCheckBook[0].bookId,
                bookAuthor: this.isCheckBook[0].author,
                bookTitle: this.isCheckBook[0].bookTitle,
                bookCover: this.isCheckBook[0].coverImage,
                name: this.getDefultAddress.name,
                phone: this.getDefultAddress.phone,
                address: this.getDefultAddress.address + this.getDefultAddress.detailadd
            }
            console.log(data)
            this.$store.dispatch('createOrder', data).then(res => {
                if (res == 'success') {
                    uni.hideLoading();
                    this.$Router.push({
                        name: 'pay'
                    })
                } else {
                    uni.hideLoading();
                    this.$tools.toast('加载失败')
                }
            })
            console.log(data)

        },
        getCart() {
            let data = this.$store.state.cart.cart;
            this.cart = []
            this.cart = this.cart.concat(data)
        },
        // 全选
        changeSelectedAll() {
            console.log(this.isCheckedAll)
            let data = this.isCheckedAll ? 0 : 1
            this.$store.dispatch('checkAllBook', data).then(res => {
                console.log(res)
                if (res == 'success')
                    this.getCart()
            })
        },
        reMove(index) {
            // 将书籍从购物车中移除
            this.$store.dispatch('deleteCart', index).then(res => {
                if (res == 'success') {
                    this.getCart()
                    this.$tools.toast('删除成功')
                }
            })

        },
        changeSelectedItem(index) {
            // 更改书籍的选中状态
            // 获取当前书籍的选中状态
            this.$store.dispatch('ckeckBook', index).then(res => {
                if (res == 'success') {

                    this.getCart()
                }
            })
        }
    }
}
</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;

    .page {
        width: 100%;
        height: 100%;

        .title {
            margin-left: 1rem;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 4rem;
            font-weight: bold;
            font-size: 2rem;
            color: $uni-color-theme-6;
            width: 80%;
            border-bottom: 2px solid $uni-color-theme-6;
        }

        .list {
            width: 100%;
            height: 100%;

            .item {
                padding:0.5rem 0;
                margin: 1rem;
                background: $uni-bg-color ;
                border-radius: 1rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                position: relative;

                .checkbox {
                    margin-left: 0.5rem;

                }

                image {
                    width: 4rem;
                    height: 5rem;
                    border-radius: 0.5rem;
                    background-size: cover;
                    background-position: center;
                }

                .middle {
                    margin-left: 1rem;
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .name {
                        width: 12rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        -o-text-overflow: ellipsis;
                        font-size: 1.2rem;
                        font-weight: bold;
                    }

                    .author {
                        font-size: 1rem;
                    }

                    .price {
                        font-size: 1rem;
                        color: $uni-color-theme-6;
                    }
                }

                .right {
                    position: absolute;
                    top: 0.2rem;
                    right: 0.2rem;
                    height: 100%;

                    i {
                        font-style: normal;
                        font-size: 1.2rem;
                        color: $uni-text-color-grey;
                    }
                }

            }

            .divider {
                width: 100%;
                height: 6rem;
            }
        }

        .settlement {
            width: 100%;
            height: 4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background: $uni-bg-color;
            position: fixed;
            bottom: 0;

            .left {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-left: 1rem;
                margin-right: 1rem;
            }

            .right {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-left: 1rem;
                margin-right: 0.5rem;

                .cost {
                    .price {
                        font-size: 1.2rem;
                        color: $uni-color-theme-6;
                    }

                    .freight {
                        font-size: 0.8rem;
                        color: $uni-text-color-grey;

                        span {
                            font-size: 0.8rem;
                            color: $uni-text-color;
                        }
                    }
                }

                .btn {
                    width: 5rem;
                    background: $uni-color-theme-6;
                    color: white;
                }
            }
        }
    }
}
</style>